<!DOCTYPE HTML>
<html>
<body>

<div style='text-align: center'>
  <canvas id="graph" width="600" height="600" style="border:0px solid #000000;">
  Your browser does not support the canvas element.
  </canvas>

  <br/>
  <button style='display: none' onclick='draw_prev()' style='width: 160px; height: 40px'>prev</button>
  <button style='display: none' onclick='draw_play()' style='width: 160px; height: 40px'>play / stop</button>
  <button style='display: none' onclick='draw_next()' style='width: 160px; height: 40px'>next</button>
</div>

<script type="text/javascript" src="draw_data.js">
</script>

<script type="text/javascript">

var c = document.getElementById("graph");
var cxt = c.getContext("2d");
cxt.fillStyle="#000000";
cxt.lineWidth=1;
var side = c.width;

function f(x) {
  var margin = 10;
  return margin + (side - 2 * margin) * x;
}

function draw_point(x, y) {
  x = f(x);
  y = f(y);
  cxt.beginPath();
  cxt.arc(x,y,4,0,Math.PI*2,false);
  cxt.closePath();
  cxt.fill();
}

function draw_edge(x1, y1, x2, y2) {
  x1 = f(x1);
  y1 = f(y1);
  x2 = f(x2);
  y2 = f(y2);
  cxt.moveTo(x1, y1);
  cxt.lineTo(x2, y2);
  cxt.stroke();
}

function draw_graph(g, n, p) {
  draw_clear();
  for (var i = 0; i < n; i++)
    draw_point(p[i].x, p[i].y);
  for (var k = 0; k < g.length; k++) {
    i = g[k].i;
    j = g[k].j;
    draw_edge(p[i].x, p[i].y, p[j].x, p[j].y);
  }
}

function draw_next() {
  if (cur + 1 < model.ps.length) {
    draw_graph(model.g, model.n, model.ps[++cur]);
    return true;
  }
  return false;
}

function draw_prev() {
  if (cur - 1 >= 0) {
    draw_graph(model.g, model.n, model.ps[--cur]);
    return true;
  }
  return false;
}

var __timer;

function __next() {
  if (draw_next())
    __timer = setTimeout(__next, 10);
}

function draw_play() {
  __next();
}

function draw_stop() {
  clearTimeout(__timer);
}

function draw_init() {
  cur = -1;
  draw_play();
}

function draw_clear() {
  cxt.clearRect(0, 0, side, side);
}

draw_init();

</script>

</body>
</html>
